<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>异步数据加载和更新</title>
    <script src="js/echarts.js"></script>
</head>
<body>
    <div id="ex1" style="width: 600px;height: 300px"></div>

    <div id="ex2" style="width: 600px;height: 300px"></div>

    <div id="ex3" style="width: 600px;height: 300px"></div>

    <div id="ex4" style="width: 600px;height: 400px"></div>

    <script>
        var ex1 =   document.getElementById('ex1');
        ex1=    echarts.init(ex1);
        setInterval(function () {
            var upData = {
                title:{
                    text:'随机数演示动态更新数据'
                },
                series:{
                    type:'pie',
                    data:[]
                }
            };
            for(var i   =   0;i <   10;i++){
                var item    =   {
                    name:"随机数"+(i+1),
                    value:(Math.random()*100).toFixed(0)
                };
                upData.series.data.push(item);
            }
            ex1.setOption(upData);
//            console.log(upData);
        },1500);
    </script>

    <script>
        var ex2 =   document.getElementById('ex2');
        ex2=    echarts.init(ex2);
        setInterval(function () {
            var data    =   [];
            var random  =   function (max) {
                return (Math.random()*max).toFixed(1);
            };

            for(var i=0;i<100;i++)  data.push([random(20),random(20)]);

            var upData  =   {
                animation:true,
                legend:{
                    data:['scatter']
                },
                tooltip:{},
                xAxis:{
                    type:'value',
                    min:'0',
                    max:'20'
                },
                yAxis:{
                    type: 'value',
                    min: 'dataMin',
                    max: 'dataMax'
                },
                series:[
                    {
                        name:'scatter',
                        type:'scatter',
                        itemStyle:{
                            normal:{
                                opacity:0.75
                            }
                        },
                        symbolSize:function (val) {
                            return Math.random()*20;
                        },
                        data:data
                    }
                ]
            };
            ex2.setOption(upData);
        },1500);
    </script>

    <script>
        var ex3=    document.getElementById('ex3');
        ex3 =    echarts.init(ex3);
        option = {
            tooltip : {
                formatter: "{a} <br/>{b} : {c}%"
            },
            toolbox: {
                feature: {
                    restore: {},
                    saveAsImage: {}
                }
            },
            series: [
                {
                    name: '业务指标',
                    type: 'gauge',
                    detail: {formatter:'{value}%'},
                    data: [{value: 50, name: '完成率'}]
                }
            ]
        };

        setInterval(function () {
            option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
            ex3.setOption(option, true);
        },2000);
    </script>

    <script>
        var ex4 =   document.getElementById('ex4');
        ex4 =   echarts.init(ex4);
        ex4Option = {
            tooltip : {
                trigger: 'axis'
            },
            legend: {
                data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis : [
                {
                    type : 'category',
                    boundaryGap : true,
                    data : ['周一','周二','周三','周四','周五','周六','周日']
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
                {
                    name:'邮件营销',
                    type:'line',
                    stack: '总量',
                    areaStyle: {normal: {}},
                    data:[120, 132, 101, 134, 90, 230, 213]
                },
                {
                    name:'联盟广告',
                    type:'line',
                    stack: '总量',
                    areaStyle: {normal: {}},
                    data:[220, 182, 191, 234, 290, 330, 310]
                },
                {
                    name:'视频广告',
                    type:'line',
                    stack: '总量',
                    areaStyle: {normal: {}},
                    data:[150, 232, 201, 154, 190, 330, 410]
                },
                {
                    name:'直接访问',
                    type:'line',
                    stack: '总量',
                    areaStyle: {normal: {}},
                    data:[320, 332, 301, 334, 390, 330, 320]
                },
                {
                    name:'搜索引擎',
                    type:'line',
                    stack: '总量',
                    label: {
                        normal: {
                            show: true,
                            position: 'top'
                        }
                    },
                    areaStyle: {normal: {}},
                    data:[820, 932, 901, 934, 1290, 1330, 1320]
                }
            ]
        };
        setInterval(function () {
            var tempDate    =   ex4Option.xAxis[0].data[0];
            ex4Option.xAxis[0].data[0] =   ex4Option.xAxis[0].data[6];
            ex4Option.xAxis[0].data[6] =   tempDate;

            var length  =   ex4Option.xAxis[0].data.length;
            ex4Option.xAxis[0].data.push(ex4Option.xAxis[0].data[length-6]);

            ex4Option.series[0].data.push((Math.random()*3000).toFixed(0));
            ex4Option.series[1].data.push((Math.random()*3000).toFixed(0));
            ex4Option.series[2].data.push((Math.random()*3000).toFixed(0));
            ex4Option.series[3].data.push((Math.random()*3000).toFixed(0));
            ex4Option.series[4].data.push((Math.random()*3000).toFixed(0));
            ex4.setOption(ex4Option);
        },2000);
    </script>
</body>
</html>